<template>
  <Top-Page class="label-box">
    <NavBar title="通讯录标签" leftArrow rightText="新建" @click-left="navBack()" @click-right="show = !show" />

    <view class="label-list-box">
      <view
        class="label-item"
        v-for="(item, index) in list"
        :key="'list' + index"
        @click="toDetailsLabel(item.label_id, item.title)"
      >
        <view class="label-item-right">
          <view class="label-item-title">
            <view class="label-item-title__text text-one">
              {{ item.title ?? '标签' }}
            </view>
            <view class="label-item-num" v-if="item.num">（{{ item.num }}）</view>
          </view>

          <view class="label-item-introduce text-one" v-if="item.friend && item.friend.length">
            <template v-for="it in item.friend">{{ it.realname }}&nbsp;</template>
          </view>
        </view>
      </view>
    </view>

    <!-- 右上角的更多 -->
    <Popup v-model:show="show" position="bottom" closeable round class="more-popup">
      <input class="more-popup-input" v-model="value" focus placeholder="输入标签名称" />
      <view class="more-popup-btn" @click="add">完成</view>
    </Popup>
  </Top-Page>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue';
import Popup from '@/components/Popup/Popup.vue';
import { navBack } from '@/utils/utils.js';
export default {
  data() {
    return {
      navBack: navBack,
      show: false,
      value: '',
      list: []
    };
  },
  components: { NavBar, Popup },
  onShow() {
    this.firstApi();
  },
  methods: {
    add() {
      uni.navigateTo({
        url: `/pages/friend/options/options?type=new&name=${this.value}`
      });

      this.show = false;
      this.value = '';
    },
    toDetailsLabel(id, title) {
      uni.navigateTo({
        url: `/pages/friend/details-label/details-label?id=${id}&title=${title}`
      });
    },
    firstApi() {
      this.$api.friendCircleApi.imLabel().then((res) => {
        this.list.length = 0;
        const data = res.data ?? [];

        if (Array.isArray(data)) {
          this.list.push(...data);
        }
      });
    },
    onClickRight() {
      uni.navigateTo({
        url: `/pages/friend/details/details`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
